<template>
  <transition name="showHeader">
    <div :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left">
          <div class="brand">
            <a href="/" v-if="!!$store.state.user.logoPic">
              <img :src="$store.state.user.logoPic | imgURLFilter" class="logo" alt="logo" />
            </a>
            <a-divider class="divider" type="vertical" v-if="!!$store.state.user.title"></a-divider>
            <h1 class="title">{{ $store.state.user.title }}</h1>
          </div>
        </div>
        <user-menu class="header-index-right"></user-menu>
      </div>
    </div>
  </transition>
</template>

<script>
import UserMenu from './UserMenu';
import Logo from './Logo';
import { mixin } from '@/utils/mixin';

export default {
  name: 'MainHeader',
  components: {
    UserMenu,
    Logo
  },
  mixins: [mixin],
  props: {
    showUserMenu: {
      type: Boolean,
      required: false,
      default: false
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    device: {
      type: String,
      required: false,
      default: 'desktop'
    }
  },
  data() {
    return {
      visible: true,
      oldScrollTop: 0
    };
  },
  mounted() {
    document.addEventListener('scroll', this.handleScroll, { passive: true });
  },
  methods: {
    handleScroll() {
      if (!this.autoHideHeader) {
        return;
      }

      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
      if (!this.ticking) {
        this.ticking = true;
        requestAnimationFrame(() => {
          if (this.oldScrollTop > scrollTop) {
            this.visible = true;
          } else if (scrollTop > 300 && this.visible) {
            this.visible = false;
          } else if (scrollTop < 300 && !this.visible) {
            this.visible = true;
          }
          this.oldScrollTop = scrollTop;
          this.ticking = false;
        });
      }
    },
    toggle() {
      this.$emit('toggle');
    }
  },
  beforeDestroy() {
    document.body.removeEventListener('scroll', this.handleScroll, true);
  }
};
</script>

<style lang="less" scoped>
@import '../index.less';

.header-index-wide {
  flex: 1 !important;
  height: @mos-header-height !important;
}
.brand {
  display: flex;
  align-items: center;

  .logo {
    height: 42px;
    vertical-align: middle;
    border-style: none;
  }
  .divider {
    margin: 0 10px;
    height: 24px;
  }
  .title {
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
  }
}
.header-index-right {
  height: @mos-header-height !important;
}
</style>
